<script setup>
import {computed, ref} from 'vue';
import {useStore} from 'vuex';
import {ElMessage} from "element-plus";

const store = useStore();
const trackingNumber = ref('');

const simulateScan = () => {
  // 模拟扫码动作，生成一个随机的快递单号
  trackingNumber.value = Math.floor(100000000 + Math.random() * 900000000).toString();
  startScan();
};

const startScan = () => {
  // 调用 API 获取快递信息
  if (trackingNumber.value) {
    store.dispatch('getScanInfo', trackingNumber.value)
        .then(() => {
          // 成功获取信息后可以执行其他操作
        })
        .catch(error => {
          console.error("Error fetching scan info:", error);
          ElMessage.error({message: '无法获取快递信息', duration: 5000});
        });
  } else {
    ElMessage.error({message: '请提供快递单号', duration: 5000});
  }
};

const scanResult = computed(() => store.getters['scan/scanResult']);

const confirmEntry = () => {
  if (scanResult.value) {
    // 提交快递信息到系统
    console.log('提交快递信息:', scanResult.value);
    // 这里可以添加 API 请求来提交数据
    ElMessage.success({message: '快递信息已确认', duration: 5000});
  } else {
    ElMessage.error({message: '没有可确认的快递信息', duration: 5000});
  }
};
</script>

<template>
  <div style="padding: 20px;">
    <h2>快递信息录入</h2>
    <el-input v-model="trackingNumber" placeholder="请输入快递单号"></el-input>
    <br><br>
    <el-button type="primary" @click="simulateScan">模拟扫码</el-button>
    <el-button type="success" @click="startScan">手动扫码</el-button>
    <br><br>
    <div v-if="scanResult">
      <h3>扫描结果</h3>
      <p><strong>快递单号:</strong> {{ scanResult.trackingNumber }}</p>
      <p><strong>寄件人:</strong> {{ scanResult.sender }}</p>
      <p><strong>收件人:</strong> {{ scanResult.recipient }}</p>
      <p><strong>快递柜编号:</strong> {{ scanResult.lockerId }}</p>
      <p><strong>柜门编号:</strong> {{ scanResult.doorId }}</p>
      <br>
      <el-button type="warning" @click="confirmEntry">确认</el-button>
    </div>
    <div v-else>
      <p>尚未扫描任何快递信息。</p>
    </div>
  </div>
</template>

<style scoped>
/* Add your styles here */
.el-input {
  width: 300px;
}
</style>



